import React from 'react';

import Popup from '../../../../components/popup/Popup.jsx';
import { Button } from '../../../../components/button/Button.jsx';

export default class PopupPage extends React.Component{
  constructor(props){
    super(props);
    this.state={
      visible: false
    }
    this.showPopup = this.showPopup.bind(this);
    this.cancelPopup = this.cancelPopup.bind(this);
    this.ok = this.ok.bind(this);
  }

  showPopup(data){
    this.setState({
      [data.popup]: true
    })
  }

  cancelPopup(data){
    this.setState({
      [data.popupType]: false
    })
  }

  ok(data){
    this.setState({
      [data.popupType]: false
    })
  }

  showConfirm(){
    Popup.confirm({
      width: 300,
      title: '是否确定删除？',
      content: '数据删除后无法恢复'
    });
  }

  showInfo(){
    Popup.info({
      title: 'Some Messages',
      content: (<div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>)
    })
  }

  showSuccess(){
    Popup.success({
      width: 300,
      title: '修改成功',
      content: ''
    })
  }

  showError(){
    Popup.error({
      title: 'Some Messages',
      content: (<div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>)
    })
  }

  showWarning(){
    Popup.warning({
      title: 'Some Messages',
      content: (<div>
        <p>some messages...some messages...</p>
        <p>some messages...some messages...</p>
      </div>)
    })
  }

  render(){
    let popupProps = {
      width: '520px',
      onCancel: this.cancelPopup,
      onOk: this.ok
    }

    return <div className='popup-page'>
      <div style={{paddingBottom: '20px'}}>
        <Button onClick={this.showPopup} popup={'basic'}>Basic Popup</Button>
        <Button onClick={this.showPopup} popup={'noTitle'}>No Title</Button>
        <Button onClick={this.showPopup} popup={'noFooter'}>No footer</Button>
        <Button onClick={this.showPopup} popup={'customizedFooter'}>customized footer</Button>
        <Button onClick={this.showPopup} popup={'otherConfig'}>other config</Button>
      </div>
      <div style={{paddingBottom: '20px'}}>
        <Button onClick={this.showConfirm}>confirm Popup</Button>
        <Button onClick={this.showInfo}>info Popup</Button>
        <Button onClick={this.showSuccess}>success Popup</Button>
        <Button onClick={this.showError}>error Popup</Button>
        <Button onClick={this.showWarning}>warning Popup</Button>
      </div>
      <Popup
        {...popupProps}
        title={'Basic Popup'}
        visible={this.state.basic}
        popupType={'basic'}
      >
        <div>popup</div>
        <div>content...</div>
        <div>content...</div>
        <div>content...</div>
      </Popup>
      <Popup
        {...popupProps}
        visible={this.state.noTitle}
        closable={false}
        popupType={'noTitle'}
      >
        <div>popup</div>
        <div>content...</div>
        <div>content...</div>
        <div>content...</div>
      </Popup>
      <Popup
        {...popupProps}
        title={'Basic Popup'}
        visible={this.state.noFooter}
        footer={false}
        popupType={'noFooter'}
      >
        <div>popup</div>
        <div>content...</div>
        <div>content...</div>
        <div>content...</div>
      </Popup>
      <Popup
        {...popupProps}
        visible={this.state.customizedFooter}
        popupType={'customizedFooter'}
        footer={[
          <Button key="back" type={'ghost'} onClick={this.cancelPopup} popupType={'customizedFooter'}>Return</Button>,
          <Button key="submit" type="primary" onClick={this.ok} popupType={'customizedFooter'}>
            Submit
          </Button>,
        ]}
      >
        <div>popup</div>
        <div>content...</div>
        <div>content...</div>
        <div>content...</div>
      </Popup>
      <Popup
        {...popupProps}
        title={'Other Config'}
        visible={this.state.otherConfig}
        popupType={'otherConfig'}
        okText={'Ok'}
        cancelText={'cancel'}
        okType={'danger'}
        zIndex={2000}
      >
        <div>popup</div>
        <div>content...</div>
        <div>content...</div>
        <div>content...</div>
      </Popup>
    </div>
  }
}